<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
	<meta charset="UTF-8">
	<!-- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Cache" content="no-cache">
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" /> -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>绽放烟火</title>
	<link rel="stylesheet" href="./index.css">
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		.text {
			position: absolute;
			overflow: hidden;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 2;
			color: rgba(255, 255, 255, 0);

		}

		.logo_text {
			font-family: "Times New Roman";
			font-size: 30px;
			fill: none;
			stroke: url("#geekColor");
			stroke-width: 1;
			stroke-dasharray: 10 800;
			stroke-dashoffset: 10;
			animation: 3s linear 0s drawing infinite;
		}

		.svg {
			z-index: 3;
			position: relative;
			transform-origin: center;
			transform: rotate(-30deg);
		}

		/* 绘画动画 */
		@keyframes drawing {
			to {
				stroke-dasharray: 800;
				stroke-dashoffset: 0;
			}
		}

		.main {
			height: 100vh;
			width: 100vw;
			position: relative;
		}

		.moon {
			position: absolute;
			top: 30px;
			right: 30px;
			width: 2.3rem;
			height: 2.3rem;
			z-index: 4;
			background-color: rgb(255, 255, 255);
			border-radius: 50%;
			border: none;
			padding: 0;
			animation: moommove 1.0s linear infinite alternate;
			overflow: hidden;
		}
		.moon::after{
			content:' ';
			position: absolute;
			width: 2rem;
			height: 2rem;
			z-index: 5;
			right: -1rem;
			top: -.5em;
			border-radius: 50%;
			background-color: black;

		}

		@keyframes moommove {
			to {
				transform: translateY(5px);
				

			}
		}
		.star1 {
			z-index: inherit;
			position: absolute;
			top: 20px;
			left: 10px;
			width: 1px;
			height: 1px;

			/* border-radius:50%; */
			background-color: transparent;
			box-shadow: 30px 30px white, 10px 20px white;
		}
	</style>
</head>

<body>
	<div class="main">
		<a href="https://gitee.com/xulzu/firework.git" class="moon"></a>
		<div class="text">
			<div id='stars'></div>
			<div id='stars2'></div>
			<div id='stars3'></div>
			<svg class="svg">
				<!-- 定义渐变颜色 -->
				<defs>
					<linearGradient id="geekColor">
						<stop offset="0%" stop-color="#91bd3a">
							<!-- 渐变动画 -->
							<animate attributeName="stop-color" values="#91bd3a;#12cad6;#91bd3a" dur="10s" begin="3s"
								repeatCount="indefinite"></animate>
						</stop>

						<stop offset="100%" stop-color="#12cad6">
							<animate attributeName="stop-color" values="#12cad6;#91bd3a;#12cad6" dur="10s" begin="3s"
								repeatCount="indefinite"></animate>
						</stop>
					</linearGradient>
				</defs>

				<text class="logo_text" x="30" y="30">
					Happy New Year -_-
				</text>
			</svg>
		</div>
		<canvas id="drawing" style="z-index: 1;">
		</canvas>
	</div>
	<audio id="huahuo" src="./firework.mp3" preload=“auto” autoplay="autoplay" loop='loop'></audio>
	<script src="./index.js"></script>
</body>
</html>